<template>
  <wd-navbar
      :safeAreaInsetTop="true"
      :bordered="false"
      custom-style="background: linear-gradient(180deg, rgba(175,198,178,1) 0%, rgba(195,211,195,1) 54%, rgba(216,225,212,1) 98%) !important;"
  >
    <template #left>
      <wd-icon name="thin-arrow-left" size="18px" @click="handleBack"></wd-icon>
    </template>
    <temaplte #title>
      <view class="nav-title">热门景区</view>
    </temaplte>
  </wd-navbar>
  <view class="page-container">
    <br>
    <ScenicSpotItem
        v-for="(item,index) in providerList"
        :key="index"
        :recommendScenicSpotItem="item"
        :bgc="'#ffffff'"
    ></ScenicSpotItem>
  </view>
</template>

<script setup>
  import {ref} from 'vue';
  import ScenicSpotItem from '@/ticketSubPack/components/scenicSpotItem/index.vue';
  import {searchHotProviderList} from "@/api/ticket";

  const excludeIds = ref([]);
  const pageSize = ref(6);
  const pageNo = ref(1);
  const totalNumber = ref(0);
  const providerList = ref([]);


  const handleBackHome = () => {
    uni.reLaunch({
      url: '/pages/index/index',
    })
  };
  const handleBack = () => {
    let _currentPages = getCurrentPages()
    if (_currentPages.length > 1) {
      uni.navigateBack({
        delta: 1
      })
    } else {
      handleBackHome();
    }
  };
  const latitude = ref("");
  const longitude = ref("");
  const queryProductList = async () => {
    await searchHotProviderList({
      exludeIds: excludeIds.value,
      pageSize: pageSize.value,
      pageNo: pageNo.value,
	  lnt:longitude.value,
	  lat:latitude.value,
	  type:0

    }).then((res) => {
      let {result,total} = res;
	  result = result.filter(item =>item.ableStatus == 0)
	  console.log('resresresres',result);
      providerList.value = [...providerList.value,...result];
      totalNumber.value = total;
    })
  }

  onLoad((options) => {
	const {locationInfo} = useStore('app');
    if(!locationInfo.value.latitude || !locationInfo.value.longitude) {
      let {latitude:_latitude,longitude:_longitude} = uni.getStorageSync('locationInfo');
      latitude.value = _latitude;
      longitude.value = _longitude;
    }else {
      let {latitude:_latitude,longitude:_longitude} = locationInfo.value;
      latitude.value = _latitude;
      longitude.value = _longitude;
    }
    let { excludeProviderIdList } = options;
    excludeIds.value = JSON.parse(decodeURIComponent(excludeProviderIdList));
    queryProductList();
  });
  onReachBottom(() => {
    if(totalNumber.value > providerList.value.length) {
      pageNo.value += 1;
      queryProductList();
    }
  })
</script>

<style lang="scss" scoped>
  .nav-title {
    font-size: 30rpx;
    font-weight: normal;
    color: #2D2D2D;
  }
  .page-container {
    width: 100%;
    min-height: calc(100vh - 184rpx);
    padding: 20rpx 27rpx 0 27rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(213,223,210,1) 0%, rgba(238,239,231,1) 26%, rgba(238,239,231,1) 98%);
  }
</style>
